<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM节点</title>
</head>

<body>
    <!-- <h3>插入节点</h3> -->
    <!-- <p>在现有 dom 结构基础上插入新的元素节点</p> -->
    <!-- <hr> -->
    <!-- 普通盒子 -->
    <!-- <div class="box"></div> -->
    <!-- 点击按钮向 box 盒子插入节点 -->
    <!-- <button class="btn">插入节点</button> -->
    <h3>插入节点</h3>
    <p>在现有 dom 结构基础上插入新的元素节点</p>
    <hr>
    <button class="btn1">在任意节点前插入</button>
    <button class="btn2">删除节点</button>
    <button class="btn3">所有的子节点</button>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript 基础</li>
        <li>Web APIs</li>
    </ul>
    <script>
        const btn3 = document.querySelector('.btn3')
        btn3.addEventListener('click', function () {
            // 父节点
            const ul = document.querySelector('ul')

            // 所有的子节点
            console.log(ul.childNodes)
            // 只包含元素子节点
            console.log(ul.children)
        })
        const btn = document.querySelector('.btn2')
        btn.addEventListener('click', function () {
            // 获取 ul 父节点
            let ul = document.querySelector('ul')
            // 待删除的子节点
            let lis = document.querySelectorAll('li')

            // 删除节点
            ul.removeChild(lis[0])
        })
        const btn1 = document.querySelector('.btn1')
        btn1.addEventListener('click', function () {

            // 第 2 个 li 元素
            const relative = document.querySelector('li:nth-child(2)')

            // 1. 动态创建新的节点
            const li1 = document.createElement('li')
            li1.style.color = 'red'
            li1.innerText = 'Web APIs'

            // 复制现有的节点
            const li2 = document.querySelector('li:first-child').cloneNode(true)
            li2.style.color = 'blue'

            // 2. 在 relative 节点前插入
            document.querySelector('ul').insertBefore(li1, relative)
            document.querySelector('ul').insertBefore(li2, relative)
        })
    </script>
</body>

</html>